<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" th:href="@{/admin/element-ui/lib/theme-chalk/index.css}">
  <link href="../mall/image/迪.png"rel="shortcut icon"type="image/x-icon">
  <style>
    .demo-table-expand {
      font-size: 0;
    }

    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
  </style>


</head>
<body>
  <div id="app">
    <template>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="支付方式">
                <span>{{ props.row.payType }}</span>
              </el-form-item>
              <el-form-item label="创建时间">
                <span>{{ props.row.createTime }}</span>
              </el-form-item>
              <el-form-item label="收件地">
                <span>{{ props.row.userAddress }}</span>
              </el-form-item>
              <el-form-item label="商品">
                <span v-for="(item, index) in props.row.orderGoods">
                  {{ item }}
                  <br>
                </span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="订单号"
            prop="orderNo">
        </el-table-column>
        <el-table-column
            align="center"
            label="订单总价"
            prop="totalPrice">
        </el-table-column>
        <el-table-column
            align="center"
            label="订单状态"
            prop="orderStatus">
        </el-table-column>
        <el-table-column
            width="500"
            align="center"
            label="操作">
          <template slot-scope="scope">
            <!-- 修改订单 -->
            <el-popover
                placement="top"
                width="200"
                trigger="hover">
              <div style="text-align: center">
                <p style="font-size: 15px; color: #409eff"><b>修改订单</b></p>
              </div>
              <el-button
                  @click="editOrder(scope.row)"
                  slot="reference"
                  type="primary"
                  icon="el-icon-edit"
                  circle></el-button>
            </el-popover>

            <!-- 关闭订单 -->
            <el-popover
                placement="top"
                width="150"
                trigger="hover">
              <div style="text-align: center">
                <p style="font-size: 15px; color: #f56c6c"><b>关闭订单</b></p>
              </div>
              <el-button
                  @click="updateOrderStatus(scope.row.orderId,-3)"
                  slot="reference" type="danger" icon="el-icon-s-release" circle></el-button>
            </el-popover>

            <!-- 配货 -->
            <el-popover
                v-if="scope.row.orderStatus === '已支付'"
                placement="top"
                width="150"
                trigger="hover">
              <div style="text-align: center">
                <p style="font-size: 15px; color: #67c23a"><b>配货成功</b></p>
              </div>
              <el-button
                  @click="updateOrderStatus(scope.row.orderId,2)"
                  slot="reference" type="success" icon="el-icon-check" circle></el-button>
            </el-popover>

            <el-popover
                v-else
                placement="top"
                width="150"
                trigger="hover">
              <div style="text-align: center">
                <p style="font-size: 15px; color: #67c23a"><b>配货成功</b></p>
              </div>
              <el-button slot="reference"  disabled icon="el-icon-check" circle></el-button>
            </el-popover>


            <!-- 出库 -->
            <el-popover
                v-if="scope.row.orderStatus === '已支付'"
                @click="updateOrderStatus(scope.row.orderId,3)"
                placement="top"
                width="150"
                trigger="hover">
              <div style="text-align: center">
                <p style="font-size: 15px; color: #e6a23c"><b>商品出库</b></p>
              </div>
              <el-button slot="reference" type="warning" icon="el-icon-truck" circle></el-button>
            </el-popover>
            <el-popover
                v-else
                placement="top"
                width="150"
                trigger="hover">
              <div style="text-align: center">
                <p style="font-size: 15px; color: #e6a23c"><b>商品出库</b></p>
              </div>
              <el-button slot="reference" disabled icon="el-icon-truck" circle></el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-dialog title="修改订单" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="订单价格" :label-width="formLabelWidth">
          <el-input v-model="form.totalPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收件地址" :label-width="formLabelWidth">
          <el-input v-model="form.userAddress" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</body>
<script th:src="@{/admin/vue.js}"></script>
<script th:src="@{/admin/element-ui/lib/index.js}"></script>
<script th:src="@{/admin/jquery-3.3.1.min.js}"></script>
<script th:src="@{/admin/dateformat.js}"></script>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        tableData: [],
        dialogFormVisible: false,
        form: {
          totalPrice: 0,
          userAddress: '',
        },
        formLabelWidth: '120px'

      }
    },
    methods: {
      getAllOrder() {
        const _this = this;
        $.ajax({
          url: "/admin/order",
          type: "GET",
          success: function (resp) {
            for (let i = 0; i < resp.length; i++) {
              switch (resp[i].orderStatus) {
                case -3: {
                  resp[i].orderStatus = '商家关闭';
                  break;
                }
                case -2: {
                  resp[i].orderStatus = '超时关闭';
                  break;
                }
                case -1: {
                  resp[i].orderStatus = '手动关闭';
                  break;
                }
                case 0: {
                  resp[i].orderStatus = '待支付';
                  break;
                }
                case 1: {
                  resp[i].orderStatus = '已支付';
                  break;
                }
                case 2: {
                  resp[i].orderStatus = '配货完成';
                  break;
                }
                case 3: {
                  resp[i].orderStatus = '出库成功';
                  break;
                }
                case 4: {
                  resp[i].orderStatus = '交易成功';
                  break;
                }
              }
              switch (resp[i].payType) {
                case 0: {
                  resp[i].payType = '无';
                  break;
                }
                case 1: {
                  resp[i].payType = '支付宝支付';
                  break;
                }
                case 2: {
                  resp[i].payType = '微信支付';
                  break;
                }
              }
              resp[i].createTime = DateFormat.format(new Date(resp[i].createTime), 'yyyy-MM-dd hh:mm:ss');
            }
            _this.tableData = resp

          }
        })
      },

      editOrder(row){
        this.dialogFormVisible = true
        this.form = row
      },
      editSubmit(){
        const _this = this;
        $.ajax({
          url : "/admin/order/edit",
          type : "PUT",
          data : {
            "orderId" : _this.form.orderId,
            "totalPrice" : _this.form.totalPrice,
            "userAddress" : _this.form.userAddress,
          },
          dataType : "JSON",
          success : function (resp) {
            if (resp.state == 200){
              _this.$notify({
                title: '成功',
                message: resp.message,
                type: 'success'
              });
              _this.getAllOrder()
              _this.dialogFormVisible = false
            }else{
              _this.$notify.error({
                title: '错误',
                message: '服务器错误',
              });
          }
        }})
      },

      updateOrderStatus(orderId,status){
        const _this = this;
        $.ajax({
          url : "/admin/order",
            type : "PUT",
          data : {
            "orderId" : orderId,
            "status" : status,
          },
          success : function (resp) {
            if (resp.state == 200){
              _this.$notify({
                title: '成功',
                message: '订单状态已更新',
                type: 'success'
              });
              _this.getAllOrder()
            }else{
              _this.$notify.error({
                title: '错误',
                message: '服务器错误',
              });
            }
          }
        })
      }
    },
    mounted: function () {
      this.getAllOrder()
    }
  })
</script>
</html>